<template>
	<header
		class="flex items-center justify-between py-3 px-2 fixed z-100 bg-white w-full md:static md:px-8 border-b border-gray-200 cursor-pointer"
	>
		<h1>
			<a href="/" class="flex items-center gap-2">
				<img src="@/assets/imgs/logo.svg" alt="Media AI" />
				Media AI
			</a>
		</h1>

		<div class="flex items-center gap-6">
			<div class="flex items-center gap-2 bg-slate-200 px-4 py-1 rounded-md">
				<img
					src="https://images.media.io/media-ai/account-panel/credit.png"
					class="size-4"
				/>
				{{ userInfo.amount ?? 0 }}
			</div>
			<div>
				<div v-if="isLogin">
					<el-popover placement="bottom" trigger="click">
						<template #reference>
							<el-avatar class="size-8"> {{ userInfo.name[0] }}</el-avatar>
						</template>

						<div
							class="text-center p-2 rounded-md cursor-pointer hover:bg-zinc-100"
							@click="handleLogout"
						>
							<i class="iconfont icon-zhuxiao" style="font-size: 14px" />
							注销
						</div>
					</el-popover>
				</div>

				<LoginDialog v-else />
			</div>
			<i class="iconfont icon-mianbaoxie md:hidden" @click="drawer = true"></i>
		</div>
	</header>

	<el-drawer v-model="drawer" title="导航栏" direction="ltr" size="60%">
		<div
			class="py-1 px-4 mb-2 rounded-md cursor-pointer group hover:bg-zinc-100"
		>
			<i
				class="iconfont icon-home text-primary group-hover:text-[#6B5CFF] mr-2"
			/>
			首页
		</div>

		<div class="py-1 px-4 rounded-md cursor-pointer group hover:bg-zinc-100">
			<i
				class="iconfont icon-aishengcheng text-primary group-hover:text-[#6B5CFF] mr-2"
			/>
			AI特效
		</div>

		<div class="border-b border-gray-200 py-2 mb-2"></div>

		<div
			class="py-1 px-4 mb-2 rounded-md cursor-pointer group hover:bg-zinc-100"
			:class="{ 'text-[#6B5CFF] bg-zinc-100': active === 'image-to-video' }"
		>
			<i
				class="iconfont icon-tupianzhuanshipin text-primary group-hover:text-[#6B5CFF] mr-2"
			></i>
			图生视频
		</div>
	</el-drawer>

	<main
		class="flex justify-between items-center md:h-[calc(100vh-74px)] bg-white py-5"
	>
		<aside class="hidden md:block w-18 h-full text-center px-2">
			<div
				v-tooltip="'首页'"
				class="py-1 mb-2 rounded-md cursor-pointer group hover:bg-zinc-100"
			>
				<i class="iconfont icon-home text-primary group-hover:text-[#6B5CFF]" />
			</div>

			<div
				v-tooltip="'AI特效'"
				class="py-1 rounded-md cursor-pointer group hover:bg-zinc-100"
			>
				<i
					class="iconfont icon-aishengcheng text-primary group-hover:text-[#6B5CFF]"
				/>
			</div>

			<div class="border-b border-gray-200 py-2 mb-2"></div>

			<div
				class="py-1 mb-2 rounded-md cursor-pointer group hover:bg-zinc-100"
				:class="{ 'text-[#6B5CFF] bg-zinc-100': active === 'image-to-video' }"
				v-tooltip="'图生视频'"
			>
				<i
					class="iconfont icon-tupianzhuanshipin text-primary group-hover:text-[#6B5CFF]"
				></i>
			</div>
		</aside>
		<section class="flex-1 p-2 md:p-0 h-full md:overflow-hidden">
			<router-view />
		</section>
	</main>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'

const { userInfo, handleLogout } = useUserStore()

const drawer = ref(false)

const active = ref('image-to-video')

const isLogin = computed(() => !!userInfo.name)
</script>

<style scoped lang="scss"></style>
